<template>
  <div class="notice-detail">
    <wd-cell-group>
      <div class="notice-header">
        <h2 class="notice-title">
          <wd-icon name="prompt" size="20px" class="title-icon" />
          {{ noticeDetail.title }}
        </h2>
        <div class="notice-meta">
          <div class="meta-row">
            优先级：
            <cu-dict-label code="notice_level" :model-value="noticeDetail.level" />
          </div>
          <div class="meta-row">发布人：{{ noticeDetail.publisherName }}</div>
          <div class="meta-row">发布时间：{{ noticeDetail.publishTime }}</div>
        </div>
      </div>
      <wd-divider />
      <div class="notice-content" v-html="noticeDetail.content" />
    </wd-cell-group>
  </div>
</template>

<script setup lang="ts">
import NoticeAPI, { NoticeDetailVO } from "@/api/system/notice";

const noticeDetail = ref<NoticeDetailVO>({});

/**
 * 获取通知详情
 * @param id 通知ID
 */
const getNoticeDetail = async (id: string) => {
  try {
    const res = await NoticeAPI.getDetail(id);
    noticeDetail.value = res;
  } catch (error) {
    console.error("获取通知详情失败：", error);
  }
};

// 页面加载
onLoad((options: any) => {
  if (options && options.id) {
    getNoticeDetail(options.id as string);
  } else {
    uni.showToast({
      title: "通知不存在",
      icon: "none",
    });
  }
});
</script>

<style scoped>
.notice-detail {
  padding: 12px;
  background: #f7f8fa;
}

.notice-header {
  padding: 16px;
  background: #fff;
  border-radius: 8px;
}

.notice-title {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

.title-icon {
  color: #666;
}

.notice-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  font-size: 13px;
  color: #666;
}

.meta-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
}

.priority-wrapper {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.notice-content {
  padding: 16px;
  font-size: 15px;
  line-height: 1.6;
  background: #fff;
  border-radius: 8px;
}

:deep(.wd-divider) {
  margin: 0 8px;
}
</style>
